<!doctype html>
<html lang="en">
	<head>
		<title>Query elevation directly from TerrainRGB</title>
		<meta
			property="og:description"
			content="This example shows how you can calculate length of line and query elevation from custom TerrainRGB DEM dataset."
		/>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
		<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			html,
			body,
			#map {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@latest/dist/maplibre-gl-terradraw.umd.js"></script>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@latest/dist/maplibre-gl-terradraw.css"
		/>
		<div id="map"></div>

		<script>
			const map = new maplibregl.Map({
				container: 'map',
				style: {
					version: 8,
					name: 'Rwanda DEM',
					sources: {
						bing: {
							type: 'raster',
							tiles: [
								'https://ecn.t0.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t1.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t2.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t4.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t5.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t6.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
								'https://ecn.t7.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1'
							],
							maxzoom: 18,
							attribution:
								'Map tiles by <a target="_top" rel="noopener" href="http://bing.com">Microsoft</a>, under <a target="_top" rel="noopener" href="https://www.microsoft.com/en-us/maps/product">Microsoft Bing Maps Platform APIs Terms Of Use</a>'
						}
					},
					glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
					layers: [
						{
							id: 'bingaerial',
							type: 'raster',
							source: 'bing',
							minzoom: 0,
							layout: {
								visibility: 'visible'
							}
						}
					]
				},
				center: [29.915923665876335, -2.00623424231469],
				zoom: 8,
				maxPitch: 85
			});

			const drawControl = new MaplibreTerradrawControl.MaplibreMeasureControl({
				modes: ['point', 'linestring', 'delete', 'download'],
				open: true,
				// enable the flag to compute elevation
				computeElevation: true,
				// set your own terrainRGB or terrarium source.
				// PNG or WEBP is supported.
				terrainSource: {
					url: 'https://wasac.github.io/rw-terrain-webp/tiles/{z}/{x}/{y}.webp',
					tileSize: 512,
					minzoom: 5,
					maxzoom: 15,
					encoding: 'mapbox'
				}
			});
			map.addControl(drawControl, 'top-left');
			map.addControl(
				new maplibregl.NavigationControl({
					visualizePitch: true,
					showCompass: true
				}),
				'bottom-right'
			);
			map.addControl(new maplibregl.GlobeControl(), 'bottom-right');
		</script>
	</body>
</html>
